<script setup lang="ts">
import { onMounted, ref } from "vue"
import  store1 from "../../store/index"
let store:any = store1()


</script>
<template>
    <el-row>
        <template v-for="el in store.search_res">
            <el-col class="card" style="background-color:white;" v-if="store.disease_tag==el.class" >
                <div class="card_left">
                    <img :src=el.img alt="" style="width:98px;height:98px"/>
                </div>
                <div class="card_right" style="background-color:white">
                    <div class="head" style="background-color:white">
                        <a href="" class="title" style="background-color:white">
                            <div class="text" style="background-color:white">{{el.name}}</div>
                        </a>
                        <div class="card-header-tag">
                            <div class="tag">{{el.grade}}</div>
                        </div>
                    </div>
                    <div class="high-light card-body" style=" margin-bottom: 50px;"> </div>
                    <div class="card-foot" style="display:flex ;height: 16px;background-color:white">
                        <div class="card-footer-address" style="display:flex;height: 16px;">
                            <span class="card_footer_title" style="background-color:white">{{el.address}}</span>
                        </div>
                    </div>
                </div>

            </el-col>
        </template>
    </el-row>

</template>
<style scoped lang="scss">
.card-header-tag {
    margin-right: 4px;
    flex-shrink: 0;

    .tag {
        font-size: 12px;
        line-height: 16px;
        background-color: #fff4e5;
        color: #ffb54c;
    }
}

.card_footer_title {
    font-size: 13px;
    line-height: 16px;
    height: 16px;
    color: #828993;
    display: -webkit-box;
    word-break: break-all;
    overflow: hidden;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    white-space: normal !important;
}

.card {
    display: flex;
    max-width: 1180px;
    width: 100%;
    border-radius: 4px;
    background-color: #fff;
    box-sizing: border-box;
    margin: 0 auto 20px;
    padding: 28px 30px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;

    .card_left {
        width: 100px;
        height: 100px;
        border-radius: 4px;
        border: 1px solid rgba(0, 0, 0, .05);
        margin-right: 24px;
        min-width: 100px;
        box-sizing: border-box;
        overflow: hidden;
    }

    .card_right {
        .high-light .card-body {
            font-size: 16px;
            line-height: 24px;
            color: #444c57;
            display: -webkit-box;
            word-break: break-all;
            overflow: hidden;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            white-space: normal !important;
        }

        .head {
            display: flex;
            align-items: center;
            margin-bottom: 12px;

            .title {
                display: inline-flex;
                align-items: center;
                margin-right: 12px;

                .text {
                    height: 32px;
                    font-size: 28px;
                    font-weight: 600;
                    line-height: 32px;
                    color: #252a33;
                    margin-right: 12px;
                    display: -webkit-box;
                    word-break: break-all;
                    overflow: hidden;
                    -webkit-line-clamp: 1;
                    text-overflow: ellipsis;
                    -webkit-box-orient: vertical;
                    white-space: normal !important;
                }
            }
        }

    }

    .card_foot {
        display: flex;
        font-size: 13px;
        line-height: 16px;
        color: #828993;

        .card-footer-address {
            display: flex;
            align-items: center;


        }
    }
}
</style>